<template>
	<statusBarVue title="我的公司" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="company-page" :style="pageHaveBarStyle">
		<view class="company-page-group">
			<uni-list>
				<uni-forms ref="form" :model="formData" :rules="rules" label-position="top" class="form"
					label-width="120px" :border="true">
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="法人代表姓名" name="name" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.name" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="营业执照号码" name="idNo" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.idNo" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="营业执照地址" name="addr" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-easyinput v-model="formData.addr" primaryColor="#22A366" :inputBorder="false" />
						</template>
					</uni-list-item>
					<uni-list-item title="是否虚拟企业" class="list-item">
						<template v-slot:footer>
							<text>{{ formData.is_virtual ? '是' : '否' }}</text>
						</template>
					</uni-list-item>
					<uni-list-item title="完成验证的时间" class="list-item">
						<template v-slot:footer>
							<text>{{ formData.verify_ts }}</text>
						</template>
					</uni-list-item>
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="营业执照照片" name="idImg" required></uni-forms-item>
						</template>
						<template v-slot:footer>
							<view class="slot-image">
								<uni-file-picker v-model="formData.idImg" :limit="formData.is_virtual ? 1 : 2"
									:del-icon="false" disable-preview file-mediatype="image" @select="select" />
							</view>
						</template>
					</uni-list-item>
				</uni-forms>
			</uni-list>
		</view>
		<view class="company-page-group  add-btns">
			<button style="color:#ffffff;backgroundColor:#22A366;" @click="handleSave(undefined)">保存</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		getCheckEnterprise,
		postAddEnterprise
	} from '@/utils/api.js';

	import {
		publics
	} from '@/mixins/publics.js';

	import tool_oss from '@/utils/oss';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				formData: {
					is_virtual: 0,
					verify_ts: 0,
				},
				rules: {
					// name:
					name: {
						// 校验 name 不能为空
						rules: [{
							required: true,
							errorMessage: '法人代表姓名不能为空',
						}]
					},
					// addr:
					addr: {
						// 校验 addr 不能为空
						rules: [{
							required: true,
							errorMessage: '营业执照地址不能为空',
						}]
					},
					// idImg:
					idImg: {
						// 校验 idImg 不能为空
						rules: [{
							required: true,
							errorMessage: '营业执照照片不能为空',
						}]
					},
					// idNo:
					idNo: {
						// 校验 idNo 不能为空
						rules: [{
							required: true,
							errorMessage: '营业执照编号不能为空',
						}]
					}
				}
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		created() {
			this.getCheckEnterpriseApi();
		},
		methods: {
			// 文件回显
			handleShowImg(url) {
				let fileObj = {
					"name": url.split('/').pop(),
					"extname": url.split('.').pop(),
					"url": url,
				};

				return fileObj;
			},

			// 获取用户企业信息
			getCheckEnterpriseApi() {
				getCheckEnterprise().then(res => {
					if (res.code === 200) {
						let {
							name,
							id_no,
							addr,
							id_img
						} = {
							...(res.data)
						}
						let getData = res.data;
						getData.idNo = id_no;
						getData.idImg = this.handleShowImg(id_img);
						this.formData = getData;
					}
				})
			},

			// 文件上传
			select(e) {
				tool_oss.oss.upload(e.tempFiles).then(res => {
					this.formData.idImg = res.fileUploadSuccessObj;
				});
			},

			// 保存
			handleSave() {
				this.$refs.form.validate((err, formData) => {
					if (!err) {
						let {
							name,
							idNo,
							addr,
							idImg
						} = {
							...formData
						}
						let postDocumentData = {
							name,
							addr,
							id_no: idNo,
							id_img: idImg.url
						};

						postAddEnterprise(postDocumentData).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: '信息保存成功！'
								});
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.company-page {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		z-index: 99;
		padding: 10px 2.66vw;
		box-sizing: border-box;

		.slot-image {
			width: 33%;

			.uni-file-picker__container {
				display: flex;
				box-sizing: border-box;
				flex-wrap: nowrap;
				margin: -5px;
				justify-content: flex-end;
			}
		}

		.company-page-group {
			margin-bottom: 15px;

			.uni-forms-item.is-direction-top .uni-forms-item__label {
				line-height: inherit;
				height: auto;
				padding: 0;
				font-weight: bold;
			}

			.uni-forms-item--border {
				padding: 0;
				border: none;
			}

			.uni-list-item__content-title {
				height: auto;
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 14px;
				color: #606266;
			}

			.list-item {
				.uni-list-item__container {
					height: 35px;
					line-height: 35px;
				}
			}

			.uni-easyinput {
				text-align: right;
			}

			.uni-list-item__container {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				&-title {
					font-size: 16px;
				}
			}
		}
	}
</style>